@l: 14vw;
@bodySize: (16 / @l);
@media (min-width:1024px) and (max-width:1399.5px) {
  .center {
    width: (1200 / @l);
    margin: 0 auto;
  }

  body {
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    font-size: @bodySize;
    user-select: none;
    .resume-head {
      width: 100%;
      position: relative;
      overflow: hidden;
      background: #23074D;
      /* fallback for old browsers */
      background: -webkit-linear-gradient(to right, rgb(35, 7, 77), rgb(204, 83, 51));
      /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(135deg, rgb(35, 7, 77), rgb(204, 83, 51));
      /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      background-image: url(../images/xzq.jpg);
      background-size: 100% 100vh;
      background-position: center top;
      background-repeat: no-repeat;

      /*光源*/
      .back-ball {
        width: 15vw;
        height: 15vw;
        border-radius: 50%;
        background-color: orange;
        backdrop-filter: blur(30px);
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-50%, -50%);
        box-shadow:
          5px 5px 10px orange,
          -5px 5px 10px orange,
          5px -5px 10px orange,
          -5px -5px 10px orange,
          5px 5px 30px orange,
          -5px 5px 30px orange,
          5px -5px 30px orange,
          -5px -5px 30px orange;
      }

      /* 头部 */
      .head-block {
        height: 100vh;
        backdrop-filter: blur(30px);
        background-color: transparent;
        position: relative;
        padding: 0px (100 / @l);
        padding-bottom: (100 / @l);
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .head {
          width: 100%;
          min-width: (1200 / @l);
          height: (150 / @l);
          background-color: rgba(0, 0, 0, 0);

          .nav-box {
            display: flex;
            align-items: center;
            height: 100%;
            justify-content: space-between;

            .avatar {
              width: (240 / @l);
              height: (60 / @l);
              display: flex;
              justify-content: center;
              overflow: hidden;

              img {
                height: 100%;
                border-radius: 50%;
                object-fit: contain;
              }
            }

            .navList {
              height: (80 / @l);
              display: flex;

              li {
                width: 25%;
                height: (80 / @l);
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0 (20 / @l);

                a {
                  display: block;
                  height: (40 / @l);
                  padding: 0px (10 / @l);
                  border-radius: (20 / @l);
                  line-height: (40 / @l);
                  background-color: #fff;

                  span {
                    margin: 0 (15 / @l);
                    letter-spacing: (2 / @l);
                    color: #23074D;

                  }
                }

              }
            }

            .download {
              display: block;
              height: (60 / @l);
              width: (240 / @l);
              background: #fff;
              border: (1 / @l) solid #fff;
              border-radius: (30 / @l);
              line-height: (60 / @l);
              padding: 0 (30 / @l);
              cursor: pointer;
              text-align: center;

              .icon-pdf {
                color: #23074D;
                font-size: (30 / @l);
                margin-right: (10 / @l);
              }

              span {
                color: #23074D;
                vertical-align: top;
                letter-spacing: (2 / @l);
              }

              &:hover {
                background-color: rgba(255, 255, 255, 0.5);
              }
            }

            .phone-nav-box{
              display: none;
            }

          }

        }

        .info {
          flex: 1;
          display: flex;
          min-width: (1200 / @l);

          .info-l,
          .info-r {
            height: 100%;
          }

          .info-l {
            display: flex;
            flex-direction: column;
            width: 60%;
            padding-right: (100 / @l);

            p {
              color: #fff;
              user-select: none;
            }

            .p1 {
              font-size: (80 / @l);
              transform: translateY(50%);
              opacity: 0;
              margin-bottom: (20/@l);
            }

            .p2 {
              font-size: (100 / @l);
              transform: translateY(50%);
              opacity: 0;
              margin-bottom: (20/@l);
            }

            .p3 {
              font-size: (25 / @l);
              transform: translateY(50%);
              opacity: 0;
              margin-bottom: (20/@l);
            }

            .line {

              height: (10 / @l);
              background: linear-gradient(to right, rgb(35, 7, 77), rgb(204, 83, 51));
              margin: (20 / @l) 0;
              transform: translateY((50/@l));
              opacity: 0;
            }

            .SocialMedia {
              margin-top: auto;

              li {
                margin-top: (20 / @l);
                transform: translateY(100%);
                opacity: 0;
                .iconfont {
                  font-size: (80 / @l);
                  transition: .5s;
                  border-radius: 50%;
                  padding: (10 / @l);
                }

                .iconfont:hover {
                  background-color: #23074D;

                }
              }
            }
          }

          .info-r {
            width: 40%;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            overflow: hidden;

            .audioPlay {
              width: 100%;
              transform: translateX(100%);
              opacity: 0;

              .changpian {
                width: 100%;
                object-fit: contain;
                user-select: none;
                -webkit-user-drag: none;
                cursor: pointer;
              }

              .changgan {
                position: absolute;
                width: (80 / @l);
                top: 0;
                right: 0;
                z-index: 5;
                object-fit: contain;
                transform-origin: center 23.6%;
                transform: rotate(90deg);
                cursor: pointer;
                -webkit-user-drag: none;
              }
            }

            .audioControl {
              margin-top: auto;
              opacity: 0;
              width: 100%;
              audio {
                width: 100%;
                min-width: (300 / @l);
              }
              .lrc-box {
                font-size: (20/@l);
                height:40px;
                line-height: 40px;
                overflow: hidden;
                ul {
                  transition: .25s;
                  li {
                    height: 40px;
                    line-height:40px;
                    color: #fff;
                    text-align: center;
                  }
                }
              }
            }

          }
        }
      }

      .resume-main {
        width: 100%;
        padding: 0 (100 / @l);
        position: relative;
        backdrop-filter: blur(30px);
        background-color: transparent;

        .opus-block {
          padding-top: (40 / @l);

          .title-box {
            .title {
              font-size: (32 / @l);
              font-weight: bold;
            }

            .tip {
              color: #909399;
            }
          }

          .cards {
            width: 100%;
            margin-top: (50 / @l);

            .card-box {
              padding: (30 / @l);
              width: 100%;
              margin-bottom: (25 / @l);
              transition: box-shadow .5s, backgroundColor .5s;
              display: flex;
              border-radius: (20 / @l);
              background-color: rgba(255, 255, 255, 0.18);
              border: (1 / @l) solid #ffffff;
              box-shadow: 0 (2 / @l) (4 / @l) rgba(0, 0, 0, .12), 0 0 (6 / @l) rgba(0, 0, 0, .04);
              transform: translateY(50%);
              opacity: 0;
              .card-l {
                width: 50%;
                margin-right: (100 / @l);
                border-radius: (20 / @l);
                overflow: hidden;

                img {
                  width: 100%;
                  object-fit: contain;
                  display: block;
                  transition: 1s;
                  &:hover{
                    transform: scale(1.1);
                  }
                }
              }

              .card-r {
                flex: 1;
                display: flex;
                flex-direction: column;
                padding: (15 / @l) 0;

                .name,
                .title {
                  margin-bottom: (15 / @l);
                }

                .name {
                  color: #666;
                  font-size: (16 / @l);
                }

                .title {
                  font-size: (30 / @l);
                }

                .info {
                  font-size: (16 / @l);
                  color: #909399;
                  margin-top: (30 / @l);
                }

                .button {
                  width: (150 / @l);
                  height: (45 / @l);
                  line-height: (45 / @l);
                  margin-top: auto;
                  font-size: (28 / @l);
                  text-align: center;
                  border: (2 / @l) solid #000;
                  border-radius: (10 / @l);
                  font-weight: bold;
                  transition: .5s;
                  cursor: pointer;
                  &:hover {
                    color: #fff;
                    background-color: rgb(65,44,255);
                    border: none;
                  }
                }
              }
            }

            .card-box:hover {
              background-color: rgba(255, 255, 255, 0.3);
              border: (1 / @l) solid #ffffff;

              box-shadow: 0 (8 / @l) (6 / @l) rgba(0, 0, 0, .12), -(8 / @l) 0  (6 / @l) rgba(0, 0, 0, .12), (8 / @l) 0  (6 / @l) rgba(0, 0, 0, .12), 0 0 (6 / @l) rgba(0, 0, 0, .04);
            }
          }
        }

        .practices-block{
          .title-box {
            .title {
              font-size: (32 / @l);
              font-weight: bold;
            }

            .tip {
              color: #909399;
            }
          }
          .content{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: (50 / @l) ;
            .item{
              margin-bottom: (50/@l);
              width: 48%;
              border-radius: (20/@l);
              overflow: hidden;
              cursor: pointer;
              transform: translateY(50%);
              opacity: 0;
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
              padding: (30 / @l);
              img{
                width: 100%;
                object-fit: contain;
                display: block;
                transition: .25s;
                &:hover{
                  transform: scale(1.2);
                }
              }
            }
          }

        }

        .about-block{
          .title-box {
            .title {
              font-size: (32/@l);
              font-weight: bold;
              text-align: center;
            }

            .tip {
              color: #909399;
              width: (500/@l);
              text-align: center;
              margin: (30/@l) auto;

              .call-me{
                display: flex;
                justify-content: space-around;
                .item{
                  border-radius: 50%;

                  .iconfont{
                    margin: (20/@l);
                    font-size: (40/@l);
                    color: #000;
                    cursor: pointer;
                  }
                }
              }
            }

          }
        }

        .footer{
          .filings{
            text-align: center;
            padding: (20/ @l) 0;
            .iconfont{
              vertical-align:middle;
              font-size: (28/ @l);
              color: #666;
            }
            a{
              vertical-align:middle;
              color: #666;
              font-size: (20/ @l);
            }
          }
        }

      }
    }

  }
}